<!-- eslint-disable eqeqeq -->
<script setup lang="ts">
import { computed } from 'vue';

import { VbenIcon } from '@vben/icons';

import { Tag } from 'ant-design-vue';

import { tagTypes } from './data';

const props = withDefaults(defineProps<Props>(), {
  color: undefined,
  label: undefined,
  icon: undefined,
  border: true,
  disabled: false,
  closable: false,
});

const emit = defineEmits<{ close: [] }>();

interface Props {
  color?: string;
  label?: string;
  icon?: string;
  border?: boolean;
  disabled?: boolean;
  closable?: boolean;
}

const color = computed<string>(() => {
  const listClass = props.color || '';
  // 是否为默认的颜色
  const isDefault = Reflect.has(tagTypes, listClass);
  // 判断是默认还是自定义颜色
  if (isDefault) {
    // 这里做了antd - element-plus的兼容
    return tagTypes[listClass]!.color;
  }
  return listClass;
});

const label = computed<string>(() => {
  return props.label ?? '';
});
</script>

<template>
  <div class="inline-block">
    <Tag
      :border="border"
      :color="color"
      :closable="closable"
      @close.prevent="emit('close')"
    >
      <template v-if="icon" #icon>
        <VbenIcon :icon="icon" />
      </template>
      <span :class="{ 'line-through': disabled }">{{ label }}</span>
      <!--<span v-if="disabled" class="inline-block align-middle text-red-500">-->
      <!--  <VbenIcon icon="fe:disabled" />-->
      <!--</span>-->
    </Tag>
  </div>
</template>
